<template>
	<el-dialog v-model="showflag" :title="title" @close="cancel">
		<slot></slot>
		<el-form :model="datalist" v-if='datalist'>
			<el-form-item v-for="(item,index) in datalist" :key='index' :label="item.name" label-width="50"
				:rules="[{ required: true, message: '', trigger: 'blur' }]">
				
				<el-upload v-if='item.type=="upload_header"' class="avatar-uploader" name='image' :headers='headers' :disabled='type==1?true:false'
					:action="url+'/admin/Sundry/uploadFile'" :show-file-list="false"
					:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
					<img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 100%;"/>
					<el-icon v-else class="avatar-uploader-icon">
						<Plus />
					</el-icon>
				</el-upload>
				
				<el-input v-if='item.type=="input"' v-model="item.value" autocomplete="off"
					:disabled='type==1?true:false' />
					
					
				<el-select v-if='item.type=="selectadmin"'  v-model="item.value" class="m-2" placeholder="请选择" size="small" style="width: 1.5rem;">
				    <el-option
				      v-for="item in adminlist"
				      :key="item.admin_id"
				      :label="item.name"
				      :value="item.admin_id"
					  :disabled='type==1?true:false' 
				    />
				  </el-select>
				
				
				<div v-if='item.type=="radio_xb"'>
					<el-radio v-model="item.value" label="1">男</el-radio>
					<el-radio v-model="item.value" label="2">女</el-radio>
				</div>
				

				<el-upload v-if='item.type=="upload"' class="avatar-uploader" name='image' :headers='headers' :disabled='type==1?true:false' 
					:action="url+'/admin/Sundry/uploadFile'" :show-file-list="false"
					:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
					<img v-if="imageUrl?imageUrl:othersdata.logo" :src="imageUrl?imageUrl:othersdata.logo" class="avatar" style="width: 100%;"/>
					<el-icon v-else class="avatar-uploader-icon">
						<Plus />
					</el-icon>
				</el-upload>
				
				
				<div v-if='item.type=="select_dq"'  class='box_ad' style="display: flex;">
					<el-select v-model="bigcity" class="m-2" placeholder="请选择" size="small" style="width: 1.5rem;margin-right: 0.3rem;" @change='getcity'>
					    <el-option
					      v-for="item in options"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value"
						  :disabled='type==1?true:false' 
					    />
					  </el-select>
					  <el-select  v-if='options2.length>0||city' v-model="city" class="m-2" placeholder="请选择" size="small" style="width: 1.5rem;margin-right: 0.3rem;" @change='getsmocity'>
					      <el-option
					        v-for="item in options2"
					        :key="item.value"
					        :label="item.label"
					        :value="item.value"
							:disabled='type==1?true:false' 
					      />
					    </el-select>
					<el-select v-if='options3.length>0||smcity' v-model="smcity" class="m-2" placeholder="请选择" size="small" style="width: 1.5rem;margin-right: 0.3rem;">
					    <el-option
					      v-for="item in options3"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value"
						  :disabled='type==1?true:false' 
					    />
					  </el-select>
					<!-- <el-cascader v-model="item.value" :options="options" @change="handleChange" @expand-change="handleChange2" placeholder=''/> -->
					
					<view class="cont" v-if="addrs">
						{{addrs}}
					</view>
				</div>
			</el-form-item>
			<!-- <el-form-item label="Zones" label-width="140">
	        <el-select v-model="form.region" placeholder="Please select a zone">
	          <el-option label="Zone No.1" value="shanghai" />
	          <el-option label="Zone No.2" value="beijing" />
	        </el-select>
	      </el-form-item> -->
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="cancel">取消</el-button>
				<el-button type="primary" @click="queding">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script>
	export default {
		props: ['title', 'datalist', 'showflag', 'type','othersdata'],
		data() {
			return {
				bigcity:'',
				city:'',
				smcity:'',
				dialogFormVisible: true,
				form: {},
				rules: [],
				flagtype: 0, //0新增,1详情,2编辑
				imageUrl: '',
				url:'',
				addrs:'',//回显地址
				options: [],//省
				options2: [],//市
				options3: [],//区
				adminlist:[],//管理员列表
			}
		},
		created() {
			this.url = this.$URL
		},
		methods: {
			queding() {
				this.options=[]//省
				this.options2=[]//市
				this.options3=[]//区
				if (this.flagtype == 1) {
					this.$emit('cancel', 'cancel')
				} else {
					let obj={
						logo:this.imageUrl,
						area:this.smcity,
						city:this.city,
						province:this.bigcity,
						value:[this.bigcity,this.city,this.smcity]
					}
					this.$emit('queding', obj)
				}

			},
			cancel() {
				this.options=[]//省
				this.options2=[]//市
				this.options3=[]//区
				this.$emit('cancel', 'cancel')
			},
			handleAvatarSuccess(res, file) {
				console.log(res)
				this.imageUrl = this.url+'/logo/'+res.data.file
			},
			beforeAvatarUpload(file) {
				const isJPG = (file.type === 'image/jpeg'|| file.type ==='image/png');
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG、PNG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			
			//选择地区回调
			handleChange2(value) {
				this.addrs = ''
				if(value[1]){//点击的市区 获取区县数据
					this.getsmocity(value[0],value[1])
				}else{//点击的省份 获取市区数据
					this.getcity(value[0])
				}
			},
			// 区域选择回调
			handleChange: function(value) {
				
			},
			
			//获取省级数据
			getbigcity() {
				this.$post({url:'/admin/Sundry/getProvinceList',isLoading:true,resolveall:true}).then(res => {
					res.data.forEach((item,index)=>{
						let obj={
							value:item.province_code,
							label:item.province_name,
						}
						this.options.push(obj)
					})
				})
			},
			//获取市级数据
			getcity(id){
				this.options2=[]
				this.options3=[]
				this.smcity=''
				this.city=''
				this.$post({url:'/admin/Sundry/getCityList',isLoading:true,resolveall:true,params:{province_code:id}}).then(res => {
					res.data.forEach((item,index)=>{
						let obj={
							value:item.city_code,
							label:item.city_name,
						}
						this.options2.push(obj)
					})
					
				})
			},
			//获取区级地区
			getsmocity(id){
				this.options3=[]
				this.smcity=''
				this.$post({url:'/admin/Sundry/getAreaList',isLoading:true,resolveall:true,params:{city_code:id}}).then(res => {
					res.data.forEach((item,index)=>{
						let obj={
							value:item.area_code,
							label:item.area_name,
						}
						this.options3.push(obj)
					})
				})
			}
		},
		computed:{
			headers(){
				return{
					admintoken:this.$store.state.userInfo.token
				}
			}
		},
		watch: {
			type(newVal, oldVal) {
				this.flagtype = newVal
			},
			datalist(val,oldval){
				console.log(val)
			},
			showflag(val,oldval){
				if(val){
					this.getbigcity()
					if(this.$route.path=='/sitemanage'){//回收点管理
						this.$post({url:'/admin/School/getAdminData'}).then((res)=>{
							this.adminlist = res
						})
					}
				}
				if(this.othersdata){
					if(!this.othersdata.bigcitycode){
						this.bigcity=''
						this.city=''
						this.smcity=''
					}
					if(this.othersdata.bigcitycode){
						
						this.bigcity = this.othersdata.bigcitycode
						let obj = {
							value:this.othersdata.bigcitycode,
							label:this.othersdata.bigcity
						}
						this.options.push(obj)
					}
					if(this.othersdata.citycode){
						this.city = this.othersdata.citycode
						let obj = {
							value:this.othersdata.citycode,
							label:this.othersdata.city
						}
						this.options2.push(obj)
					}
					if(this.othersdata.smcitycode){
						this.smcity = this.othersdata.smcitycode
						let obj = {
							value:this.othersdata.smcitycode,
							label:this.othersdata.smcity
						}
						this.options3.push(obj)
					}
				}
				
				
			}
		},
	}
</script>

<style lang="less" scoped>
	.el-form {
		width: 450px;
		left: 0;
		right: 0;
		margin: auto;

		/deep/ .el-form-item--default .el-form-item__label {
			width: 110px;
		}
	}

	::v-deep.el-dialog__header {
		border-bottom: 1px solid #eee;
	}

	/deep/ .el-dialog__body {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	/deep/ .el-upload{
		    text-align: center;
		    cursor: pointer;
		    outline: 0;
		    width: 3rem;
		    height: 200px;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    border: 1px solid #eee;
		    border-radius: 0.05rem;
	}
</style>
